// 做rem适配，使用 “浏览器宽度 / 80 + 'px'” 这个公式，得到html的font-size值
// 并且，当浏览器窗口改变大小的时候，重新计算这个值

// 计算font - size值
function setFont() {
  // 获取浏览器的宽度
  let htmlWidth = document.documentElement.clientWidth;
  // 找到临界点，判断最大宽度和最小宽度
  if (htmlWidth < 1024) htmlWidth = 1024;
  if (htmlWidth > 1920) htmlWidth = 1920;
  // 计算fontSize
  let fontSize = htmlWidth / 80 + 'px';
  // 把fontSize值，设置给html元素即可
  document.documentElement.style.fontSize = fontSize;
}

setFont(); // 刷新页面，马上计算font-size值

window.onresize = function () {
  setFont(); // 当浏览器窗口改变大小的时候，还要重新计算font-size值
}



let arr1 = []
let arr2 = []
let arr3 = []


$('.inp input').eq(3).on('click', function () {
  let v1 = $('.inp .item').eq(0)
  let v2 = $('.inp .item').eq(1)
  let v3 = $('.inp .item').eq(2)

  if (v1.val() != '' && v2.val() >= 0 && v2.val() != '' && v3.val() >= 0 && v3.val() != '') {
    $('tbody').append(`
      <tr>
        <td>${v1.val()}</td>
        <td>${v2.val()}</td>
        <td>${v3.val()}</td>
      </tr>
  `)
    $('.right').show()
  }

  arr1.push(v1.val())
  arr2.push(v2.val())
  arr3.push(v3.val())

    ; (function () {
      let myCharts1 = echarts.init($('.top .table')[0])
      let option = {
        backgroundColor: '#080b30',
        grid: {
          top: '15%',
          left: '5%',
          right: '5%',
          bottom: '15%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          axisLine: {
            show: true
          },
          axisTick: {
            show: false,
          },

          splitArea: {
            // show: true,
            color: '#f00',
            lineStyle: {
              color: '#f00'
            },
          },
          axisLabel: {
            color: '#fff'
          },
          splitLine: {
            show: false
          },
          boundaryGap: false,
          data: arr1,
        }],

        yAxis: [{
          type: 'value',
          min: 0,
          // max: 140,
          splitNumber: 4,
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.1)'
            }
          },
          axisLine: {
            show: true,
          },
          axisLabel: {
            show: false,
            margin: 20,
            textStyle: {
              color: '#d1e6eb',

            },
          },
          axisTick: {
            show: false,
          },
        }],
        series: [{
          name: '评分',
          type: 'line',
          smooth: true, //是否平滑
          showAllSymbol: true,
          // symbol: 'image://./static/images/guang-circle.png',
          symbol: 'circle',
          symbolSize: 5,
          lineStyle: {
            normal: {
              color: "#6c50f3",
              shadowColor: 'rgba(0, 0, 0, .3)',
              shadowBlur: 0,
              shadowOffsetY: 5,
              shadowOffsetX: 5,
            },
          },
          label: {
            show: true,
            position: 'top',
            textStyle: {
              color: '#6c50f3',
            }
          },
          itemStyle: {
            color: "#6c50f3",
            borderColor: "#fff",
            borderWidth: 3,
            shadowColor: 'rgba(0, 0, 0, .3)',
            shadowBlur: 0,
            shadowOffsetY: 2,
            shadowOffsetX: 2,
          },
          tooltip: {
            show: false
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(108,80,243,0.3)'
              },
              {
                offset: 1,
                color: 'rgba(108,80,243,0)'
              }
              ], false),
              shadowColor: 'rgba(108,80,243, 0.9)',
              shadowBlur: 20
            }
          },
          data: arr2
        },
        ]
      };
      myCharts1.setOption(option)
    })()

    ; (function () {
      let myCharts2 = echarts.init($('.bottom .table')[0])
      let option = {
        backgroundColor: '#031d33',
        animation: true,
        grid: {
          top: "5%",
          bottom: "15%",
          right: "5%"
        },
        xAxis: {
          data: arr1,
          axisLine: {
            show: false //隐藏X轴轴线
          },
          axisTick: {
            show: false //隐藏X轴轴线
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(77, 128, 254, 0.2)",
              width: 2
            }
          },
          axisLabel: {
            show: true,
            margin: 14,
            fontSize: 16,
            textStyle: {
              color: "#65D5FF" //X轴文字颜色
            }
          }
        },
        yAxis: [
          {
            type: "value",
            gridIndex: 0,
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(77, 128, 254, 0.2)",
                width: 2
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(77, 128, 254, 0.2)"
              }
            },
            axisLabel: {
              show: true,
              margin: 14,
              fontSize: 16,
              textStyle: {
                color: "#65D5FF"
              }
            }
          }
        ],
        series: [
          {
            name: "薪资",
            type: "bar",
            barWidth: 16,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(146, 225, 255, 1)"
                  },
                  {
                    offset: 1,
                    color: "rgba(0, 151, 251, 1)"
                  }
                ])
              }
            },
            data: arr3,
            z: 10,
            zlevel: 0
          },
        ],
        dataZoom: [
          {
            type: "slider",
            show: false,
            xAxisIndex: [0],
            endValue: 4,
            startValue: 0
          }
        ]
      }

      myCharts2.setOption(option)
    })()
  $('.item').val('')
})


